¿Cómo puedo deshacerme de esta advertencia? Odio verlo en la consola. Siento que estoy haciendo todo bien, pero sigo recibiendo esta advertencia. Esto es lo que estoy haciendo:
{reviews.map((review, i) => { return ( <> <sl-details summary={`${review.name}`} key={i} open> <p>{review.review}</p> </sl-details> <br /> </> ); })}No sé si la pila tiene alguna relevancia, pero estoy usando Nextjs y shoelace.
No colocó su key en el primer nodo dentro de la devolución de llamada de su mapa.
Los fragmentos declarados con la sintaxis <React.Fragment> explícita pueden tener claves. Un caso de uso para esto es mapear una colección a una matriz de fragmentos.
Echa un vistazo a la última sección de esa página .
Entonces su código debería convertirse en:
{reviews.map((review, i) => { return ( <React.Fragment key={i}> <sl-details summary={`${review.name}`} open> <p>{review.review}</p> </sl-details> <br /> </React.Fragment> ); })}La key={i} debe colocarse en los elementos <></> externos, y para que eso sea posible, debe convertirlos en elementos <Fragment> completos.
Código actualizado:
{reviews.map((review, i) => <Fragment key={i}> <sl-details summary={`${review.name}`} open> <p>{review.review}</p> </sl-details> <br /> </Fragment> )} PD: también lo acorté para no usar el return innecesario.